# callmepieman.com style guide

## How to use

The styleguide is located at ``./docs/styleguide``.
Homepage is at ``index.html`` of that styleguide directory.

This document is generated with [kss][kss], using a custom template.

## Architecture

The architecture is inspired by
[atomic-oobemitscss][http://www.sitepoint.com/atomic-oobemitscss/].

### Base/

As the name suggest, base is the core.
Initialize variable and resets should be found in this directory.

Similar to [atoms][atomic-atoms].

### Components/

Components are partials of the page.

Similar to [molecules][atomic-molecules]

### Dependencies/

Dependencies are theme and application specific styles.

### Regions

Regions are modules of the page.

Similar to [organisms][atomic-organisms]

## External libraries

 + [normalize][normalize]
 
 + [font-awesome][font-awesome]
 
## Contribuing

### How to

Styleguide is using the styleguide gulp task to compile, located at
``./tasks/styleguide.js``.

### template

A custom template is used as theme.

The theme is located at ``./src/docs/styleguide/template``
  
### Compiling styleguide

To compile styleguide: ``$ gulp styleguide``
To compile helpers: ``$ gulp styleguide:style``
To run a static server : ``$ gulp styleguide:server``

### Conventions

- Add properties in alphabetical order
- No more than 3 nested classes
- 4 spaces indenting

[atomic-atoms]: http://patternlab.io/about.html#atoms
[atomic-molecules]: http://patternlab.io/about.html#molecules
[atomic-organisms]: http://patternlab.io/about.html#organisms
[normalize]: https://necolas.github.io/normalize.css/
[font-awesome]: https://fortawesome.github.io/Font-Awesome/
[kss]: https://github.com/kss-node/kss-node/tree/2.x
